<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="./js/earthsdk.js"></script>
    <!-- 自定义Css样式 -->
    <link rel="stylesheet" href="./css/example1.css">
    <title>视角对象</title>
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .btn {
            padding-top: 15px;
            display: grid;
            width: 220px;
            box-sizing: border-box;
            grid-template-columns: 1fr;
        }

        .btn button {
            margin-right: 0px;
        }

        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <div id="panel">
        <h3>单个视角标签</h3>
        <div class="box">
            <img id="thumbnail" width="220" height="180"
                src=""
                alt="">
            <div class="btn">
                <button onclick="updateThumbnail(220,180)">更新标签缩略图</button>
                <button onclick="flyTo()">视角标签飞行定位</button>
                <button onclick="updateView()">更新为当前视角</button>
            </div>
        </div>


    </div>
    <script>

        /** -----------------------------------------地球创建----------------------------------------------------**/

        // Vue中引入方式：import { ESObjectsManager } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';

        const { ESObjectsManager } = XE2['esobjs-xe2-plugin-main']
        const objm = new ESObjectsManager();
        window.g_objm = objm;

        // 创建Cesium视口
        const viewer = objm.createCesiumViewer({
            "domid": document.getElementById("app")
        })
        // 通过json创建一个影像图层
        const imageryLayer = objm.createSceneObjectFromJson({
            "id": "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            "type": "ESImageryLayer",
            "maximumLevel": 18,
            "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
        });


        /**-----------------------------根据类（Class）创建一个ESCameraView对象-------------------------------**/

        // Vue中引入方式：import { ESCameraView } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
        const { ESCameraView } = XE2['esobjs-xe2-plugin-main']
        const sceneObject = objm.createSceneObject(ESCameraView)
        sceneObject.position = [
            117.81737566151948,
            34.57576364830162,
            1148.38952607802
        ]
        sceneObject.rotation = [
            275.18149884348827,
            -30.58065712810649,
            359.9993753392597
        ]
        sceneObject.duration = 3
        /**-----------------------------设置为当前视角-------------------------------------**/
        // 设置为当前视角
        function updateView() {
            sceneObject.resetWithCurrentCamera()
        }

        /**-----------------------------飞行定位-------------------------------------**/
        // 飞行定位
        function flyTo() {
            sceneObject.flyTo()
        }

        /**-----------------------------监听缩略图属性变化-------------------------------------**/
        // 监听thumbnail属性
        sceneObject.thumbnailChanged.don((newValue) => {
            document.getElementById('thumbnail').src = newValue
        })

        /**-----------------------------更新缩略图方法-------------------------------------**/
        // 更新缩略图
        function updateThumbnail(x, y) {
            //此方法内部更新缩略图thumbnail属性，没有返回值，内部是异步处理
            sceneObject.capture(x, y)
        }

    </script>

    <!-- 切换UE和Cesium引擎的组件（Vue） -->
    <div id="root">
        <switch-engine :objm="objm"></switch-engine>
    </div>
    <!-- Vue文件 -->
    <script src="./js/vue.global.js"></script>
    <!-- 切换UE和Cesium的组件 -->
    <script src="./js/switchEngineCom.js"></script>
</body>

</html>